<template>
    <div class="container">
        <el-row type="flex" justify="space-between">
            <div class="menus-wrapper">
                <div class="menus-body"  @mouseleave="leave()">
                    <div class="menus">
                        <div class="menus-item" v-for="(item,index) in cities" :key="index" @mouseenter="enterShow(index)" :class="{active:index===cur}">
                            <span>{{item.type}}</span>
                        </div>
                    </div>
                    <div class="sub-menus" v-if="citydesc.length>0" >
                        <ul>
                            <li v-for="(c,i) in citydesc" :key="i">
                                <i>{{i+1}}</i>
                                <strong>{{c.city}}</strong>
                                <span>{{c.desc}}</span>
                            </li> 
                        </ul>
                    </div>
                </div>
                <div class="aside-recommend">
                    <h4 class="aside-title">推荐城市</h4>
                    <a href="/post#" class="aside-recommend-item">
                        <img src="@/static/pic_sea.jpeg" />
                    </a>
                </div>
            </div>
            <div class="post-wrapper">
                <div class="search-wrapper">
                    <el-row type="flex" justify="space-between" class="search-bar" align="middle">
                        <input type="text" placeholder="请输入想去的地方，比如：'广州'" v-model="name" @keydown="keyDown" />
                        <i class="el-icon-search" @click="getList1"></i>
                    </el-row>
                    <div class="search-recommend">推荐：<span v-for="(item,index) in city" :key="item.id" :index="index" @click="getItem(item.name)">{{item.name}}</span></div>
                </div>
                <el-row class="post-title" type="flex" justify="space-between" align="middle">
                    <h4>推荐攻略</h4>
                    <el-button type="primary"><i class="el-icon-edit"></i><span>写游记</span></el-button>
                </el-row>
                <div class="post-list">
                    <div v-for="(item,index) in postsList" :key="item.id" :index="index">
                        <div class="post-item" v-if="item.images.length>2">
                            <h4 class="post-t" :title="item.title">
                                <router-link :to="`/post/detail?id=${item.id}`">{{item.title}}</router-link>
                            </h4>
                            <p class="post-desc">
                                <router-link :to="`/post/detail?id=${item.id}`">{{item.summary}}</router-link>
                            </p>
                            <el-row type="flex" justify="space-between" align="middle" class="card-images">
                                    <router-link :to="`/post/detail?id=${item.id}`" v-for="(img,i) in item.images" :key="i" v-if="i<3" >
                                        <img :src="img">
                                    </router-link>
                                    
                            </el-row>
                            <el-row type="flex" justify="space-between" align="middle" class="post-info">
                                <el-row type="flex" align="middle" class="post-info-left">
                                    <span>
                                        <i class="el-icon-location-outline"></i>
                                        {{item.cityName}}
                                    </span>
                                    <el-row type="flex" align="middle" class="post-user">
                                        by
                                        <router-link to="/post/detail?id=4">
                                            <img :src="`http://157.122.54.189:9095${item.account.defaultAvatar}`">
                                        </router-link>
                                        <router-link :to="`/post/detail?id=${item.id}`">
                                            {{item.account.nickname}}
                                        </router-link>
                                    </el-row>
                                    <span>
                                        <i class="el-icon-view"></i>
                                        {{item.watch}}
                                    </span>
                                </el-row>
                                <span class="post-info-right">
                                    <i class="el-icon-view"></i>
                                    {{item.like}} 赞
                                </span>
                            </el-row>
                        </div>

                        <el-row type="flex" justify="space-between" align="middle" class="post-item image-text" v-else>
                            <el-row type="flex" align="middle" class="post-cover">
                                <router-link :to="`/post/detail?id=${item.id}`" v-for="(img,i) in item.images" :key="i">
                                    <img :src="img">
                                </router-link>
                            </el-row>
                            <div class="post-content">
                                <h4 class="post-t" :title="item.title">
                                    <router-link :to="`/post/detail?id=${item.id}`">{{item.title}}</router-link>
                                </h4>
                                <p class="post-desc">
                                    <router-link :to="`/post/detail?id=${item.id}`">{{item.summary}}</router-link>
                                </p>
                                <el-row type="flex" justify="space-between" align="middle" class="post-info">
                                    <el-row type="flex" align="middle" class="post-info-left">
                                        <span>
                                            <i class="el-icon-location-outline"></i>
                                            {{item.cityName}}
                                        </span>
                                        <el-row type="flex" align="middle" class="post-user">
                                            by
                                            <router-link to="/post/detail?id=4">
                                                <img :src="`http://157.122.54.189:9095${item.account.defaultAvatar}`">
                                            </router-link>
                                            <router-link :to="`/post/detail?id=${item.id}`">
                                                {{item.account.nickname}}
                                            </router-link>
                                        </el-row>
                                        <span>
                                            <i class="el-icon-view"></i>
                                            {{item.watch}}
                                        </span>
                                    </el-row>
                                    <span class="post-info-right">
                                        <i class="el-icon-view"></i>
                                        {{item.like}} 赞
                                    </span>
                                </el-row>
                            </div>
                        </el-row>
                    </div>
                </div>
                <el-row type="flex" justify="space-between" class="pagination_wrap" v-if="total>0">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="pager"
                    :current-page="currentPage"
                    :page-sizes="[3, 5, 10, 15]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
                </el-row>
            </div>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            cities:[],
            cur:'',
            citydesc:[],
            postsList:[],
            total:0,
            pagesize:3,
            currentPage:0,
            city:[
                {name:'广州',id:1},
                {name:'上海',id:2},
                {name:'北京',id:3}
            ],
            name:''
        }
    },
    methods:{
        enterShow(index){
            this.cur = index
            this.citydesc = this.cities[index].children
        },
        leave(){
            this.citydesc = [];
            this.cur = '';
        },
        getList(){
            this.$axios({
                url:'/posts?_start='+this.currentPage+'&_limit='+this.pagesize
            }).then(res=>{
                this.postsList = res.data.data;
                this.total = res.data.total;
            })
        },
        getList1(){
            if(this.name){
                this.$axios({
                    url:'/posts?_start='+this.currentPage+'&_limit='+this.pagesize+'&city='+this.name
                }).then(res=>{
                    this.postsList = res.data.data;
                    this.total = res.data.total;
                })
            }else{
                this.$axios({
                    url:'/posts?_start='+this.currentPage+'&_limit='+this.pagesize
                }).then(res=>{
                    this.postsList = res.data.data;
                    this.total = res.data.total;
                })
            }
            
        },
        keyDown(e){
            if (e.keyCode == 13) {
              this.getList1();
            }
        },
        //切换条数
        handleSizeChange (size) {
            this.currentPage = 0
            this.pagesize = size
            this.getList()
        },
        //切换分页
        pager(np){
            this.currentPage = np+1;
            this.getList();
        },
        getItem(name){
            this.name = name;
            this.getList1();
        }
    },
    created(){
        this.getList()
    },
    mounted() {
        //请求推荐列表数据
        this.$axios({
        url:'/posts/cities'
        }).then(res=>{
        this.cities = res.data.data
        })
    },
}
</script>
<style lang="less" scoped>
.container{
    width: 1000px;
    margin:0 auto;
    padding:20px 0;
    .menus-wrapper{
        width: 260px;
        position: relative;
        z-index: 2;
        .menus{
            width: 260px;
            border:1px solid #ddd;
            border-right: none;
            border-bottom: none;
            box-shadow: 0 0 1px #f5f5f5;
            z-index:2;
            .menus-item{
                height: 40px;
                line-height: 40px;
                padding:0 20px;
                border-right: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                font-size: 14px;
                position: relative;
                z-index:2;
                &::after{
                    display: block;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-right: 1px solid #999;
                    border-top: 1px solid #999;
                    transform: rotate(45deg);
                    position: absolute;
                    right: 20px;
                    top:15px;
                }
                &.active{
                    border-right-color: #FFF;
                    color: orange;
                
                }
                &.active::after{
                    border-right-color: orange;
                    border-top-color: orange;
                }
            }
        }
        .sub-menus{
            position:absolute;left:260px;top:0;width:350px;padding:10px 20px;box-sizing:border-box;background:#fff;border:1px solid #ddd;
            ul{
                li{
                    font-size:14px;line-height:1.5;
                    vertical-align:middle;
                    i{
                        color:orange;font-size:24px;font-style:italic;
                    }
                    strong{
                        margin:0 10px;color:orange;font-weight:400;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                    span{
                        color:#999;
                        &:hover{
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
        .aside-recommend{
            margin-top:20px;
            .aside-title{
                margin-bottom: 10px;
                padding-bottom: 10px;
                font-weight: 400;
                border-bottom: 1px solid #ddd;
            }
            .aside-recommend-item{
                img{
                    width: 100%;
                    display: block;
                }
            }
        }
    }
 
    .post-wrapper{
        width: 700px;
        .search-bar{
            width: 100%;
            box-sizing:border-box;
            height: 40px;
            line-height: 40px;
            border:3px solid orange;
            input{
                flex:1;
                background: none;
                border: none;
                outline: none;
                padding:0 20px;
                line-height: 40px;
            }
            i{
                font-weight: 700;
                color: orange;
                font-size: 24px;
                margin-right: 10px;
            }
        }
        .search-recommend{
            padding:10px 0;
            font-size: 12px;
            color: #666;
            
            span{
                margin-right: 5px;
                &:hover{
                    color:orange;text-decoration:underline;cursor:pointer
                }
            }
        }
        .post-title{
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            position: relative;
            h4{
                font-weight: 400;
                font-size: 18px;
                color: orange;
                &::after{
                    display: block;
                    content: "";
                    width: 72px;
                    height: 2px;
                    background: orange;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
            }
        }

        .post-item{
            width: 100%;
            padding:20px 0;
            border-bottom: 1px solid #eee;
            .post-t{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                margin-bottom: 15px;
                font-weight: 400;
                font-size: 18px;
            }
            .post-desc{
                margin-bottom: 15px;
                line-height: 1.5;
                font-size: 14px;
                height: 63px;
                overflow: hidden;
                text-overflow:ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
            .card-images{
                margin:15px 0;
                img{
                    width: 220px;
                    height: 150px;
                    display: block;
                    object-fit: cover;
                }
            }
            .post-info-left{
                font-size: 12px;
                color: #999;
                >*{margin-right: 10px;}
            }
            .post-user{
                a{
                    color: orange;
                }
                img{
                    display: block;
                    width: 16px;
                    height: 16px;
                    border-radius: 100px;
                    margin:5px;
                }
            }
            .post-info-right{
                color: orange;
            }
            .post-cover{
                width: 200px;
                height: 150px;
                overflow: hidden;
                flex-shrink:0;
                margin-right: 10px;
                img{
                    width: 220px;
                    height: 150px;
                    display: block;
                    object-fit: cover;
                }
            }
            .image-text{
                .post-content{
                    flex: 1;
                }
            }
        }
        .pagination_wrap{
            margin-top:10px;
        }
    }
}
</style>